<template>
    <div  id="mo-nav" class="head" style="width: 100%;">
        <nav class="hair navbar  navbar-light">
            <div class="navbar hair_nav navbar-expand-sm">

                <a id="bugxx" href="#" class="#" style="display: inline-block;;height: 0.75rem;">
                    <img :src="avatar" alt="" style="width: 2.82rem;height: .71rem;display: block">
                </a>

                <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#pill" aria-controls="pill" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse hair_info" id="pill">
                    <ul class="nav nav-pills" style="">
                        <li class="nav-item active">
                            <a class="nav-link" href="javascript:;"><router-link :to="{name:'/'}" style="text-decoration: none">首页</router-link></a>
                        </li>
                        <li class="nav-item dropdown bug">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">书库</a>
                            <div class="dropdown-menu" style="">
                                <div style="position: absolute;width: .02rem;height: 1rem;background-color: rgba(0,255,255,1);left: 1rem;top:.1rem"></div>
                                <a class="dropdown-item" href="#" style="top: 0">校园</a>
                                <a class="dropdown-item" href="#" style="top: 0">古风</a>
                                <a class="dropdown-item" href="#" style="top: .4rem">种田</a>
                                <a class="dropdown-item" href="#" style="top: .4rem">魔幻</a>
                                <a class="dropdown-item" href="#" style="top: .8rem">游戏</a>
                                <a class="dropdown-item" href="#" style="top: .8rem">悬疑</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">排行榜</a>
                        </li>
                    </ul>
                    <ul class="tx_ul">
                        <!--<li class="tx"><a href="javascript:;"><img src="./images/tx.jpg" alt=""></a></li>-->
                        <li><a href="javascript:;">个人中心</a></li>
                        <li><router-link :to="{name:'cart'}"  class="bug_one" >购物车</router-link></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="seo collapse">
            <nav>
                <ul class="r">
                    <li><a href="javascript:;">我的青春恋爱物语果然有问题</a></li>
                    <li><a href="javascript:;">变态王子与不笑猫</a></li>
                    <li><a href="javascript:;">企鹅公路</a></li>
                    <li><a href="javascript:;">文学少女</a></li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
    import avatar from './logo.png'
    export default {
        data(){
            return{
                avatar :avatar
            }
        }
    }
</script>
<style scoped>
</style>